<template>
    <div class="info-box" style="height:100%;">
        <div class="info-title">
            <h3>我的信息</h3>
        </div>
        <div class="my-info-form">
            <el-form ref="form" :rules="rules" :model="form">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="学号" v-if="roleId == 1">
                    <el-input v-model="form.studentId" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="工号" v-if="roleId == 2 || roleId == 3 || roleId == 4">
                    <el-input v-model="form.jobId" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" v-if="roleId == 2">
                    <el-input v-model="form.phone" disabled="disabled"></el-input>
                </el-form-item>
                 <el-form-item label="联系方式"  v-if="roleId == 1 || roleId == 3 || roleId == 4">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="班级" v-if="roleId == 1">
                    <el-input v-model="form.className" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.gender">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { isvalidPhone } from './../../api/validate.js'
    import { mapState } from 'vuex'
    export default {
        components: {},
        data () {
            //手机号验证
            var validPhone = (rule, value,callback)=>{
                if (!value){
                    callback(new Error('请输入联系方式'))
                }else  if (!isvalidPhone(value)){
                    callback(new Error('请输入正确的11位手机号码'))
                }else {
                    callback()
                }
            }
            return {
                roleId: '',
                form: {
                    name: '',
                    studentId: '',
                    jobId: '',
                    class: '',
                    phone: '',
                    gender: ''
                },
                //表单验证
				rules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
					phone: [
						{ required: true, validator: validPhone, trigger: 'blur' }
                    ]
                }
            }
        },
        computed:{
			...mapState(['username'])
        },
        created () {
            this.roleId = JSON.parse(window.localStorage.getItem('access-user')).roleId
            this.init() //初始化
        },
        methods: {
            init() {
                let self = this
                self.$http.post('/dataplatform/system/mana/tsa/getMyMessage').then((response) => {
                    let res = response.data

                    if(res.code == '200') {
                        self.form = {
                            name: res.data.userName,
                            studentId: res.data.userNumber,
                            jobId: res.data.userNumber,
                            class: res.data.userName,
                            phone: res.data.telephone,
                            gender: res.data.userSex == 'm' ? 1 : 2,
                            className: res.data.className
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$notify({
                            title : '提示信息',
                            message : res.message,
                            type : 'error'
                        })
                    }
                })
            },
            //表单提交
            onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post('/dataplatform/system/mana/tsa/saveMyMessage',{
                            telephone: this.form.phone,
                            userName: this.form.name,
                            userSex: this.form.gender == 1 ? 'm' : 'f'
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                localStorage.setItem('username', JSON.stringify(this.form.name))
                                this.$store.commit('updateUserName', this.form.name)
                                // window.location.reload()
                            }else if(res.code == '401'){
                                this.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                this.$message.error(res.message)
                            }
                        })
                    }
                })
            }
        }
    }
</script>
